<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/include.inc.jsp"%>
<h1>一、Table转柱状图</h1>
<table class="highchart-column" data-graph-container-before="1" data-graph-type="column">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-column')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>

<h1>二、Table转折线图</h1>
<table class="highchart-line" data-graph-container-before="1" data-graph-type="line">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-line')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>
	
	
<h1>三、Table转饼状图</h1>
<table class="highchart-pie" data-graph-container-before="1" data-graph-type="pie">
  <caption>2016销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>112000</td>
      </tr>
       <tr>
          <td>三月</td>
          <td>12000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-pie')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>

<h1>四、Table转面积图</h1>
<table class="highchart-area" data-graph-container-before="1" data-graph-type="area">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-area')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>

<h1>五、Table转spline类型图（没看出有什么区别）</h1>
<table class="highchart-spline" data-graph-container-before="1" data-graph-type="spline">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-spline')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>